<template>
  <v-app>
    <Topbar />
    <v-content class="grey lighten-3">
      <v-card class="pa-12 d-flex flex-column" flat tile outlined>
        <v-icon color="#2AB795" size="70">mdi-check-circle </v-icon>
        <span class="text-center subtitle-1 text--secondary mt-2"
          >订单支付成功
        </span>
        <div class="d-flex justify-center align-center subtitle-2">
          <v-icon class="ma-1">mdi-cash-usd-outline</v-icon>
          <span class="ma-1 text--secondary">支付方式</span>
          <span class="ma-1 red--text">微信支付</span>
        </div>
        <div class="d-flex justify-center align-center subtitle-2">
          <v-icon class="ma-1">mdi-currency-usd-circle-outline</v-icon>
          <span class="ma-1 text--secondary">支付金额</span>
          <span
            class="ma-1 red--text"
            v-text="`￥${$store.state.currPayableTotalAmount}`"
          ></span>
        </div>
        <div class="d-flex justify-center align-center">
          <v-btn
            @click="$router.push('/myOrders')"
            class="ma-2"
            color="#7b7b7b"
            small
            outlined
            >查看订单</v-btn
          >
          <v-btn
            @click="$router.push('/home')"
            class="ma-2"
            color="#7b7b7b"
            small
            outlined
            >返回首页</v-btn
          >
        </div>
      </v-card>
    </v-content>
  </v-app>
</template>

<script>
import Topbar from './components/Topbar.vue';

export default {
  name: 'payment-result',
  components: { Topbar }
};
</script>
